import React, { Component } from "react"
import { Link, NavLink, Route, Switch, Redirect } from "react-router-dom"
import About from "./pages/About"
import Home from "./pages/Home"
import Test from "./pages/Test"
import Header from "./components/Header"
import MyNavLink from "./components/MyNavLink"
export default class App extends Component {
  render() {
    return (<div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <Header />
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* <a className="list-group-item" href="./about.html">About</a>
            <a className="list-group-item active" href="./home.html">Home</a> */}
            <Link className="list-group-item" to="/Test">Test</Link>
            <NavLink className="list-group-item" to="/about/a">About</NavLink>
            <MyNavLink className="list-group-item" to="/home">Home</MyNavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              <Switch>
                <Route path="/about" component={Home} exact></Route>
                <Route path="/about/a" component={About} ></Route>
                <Route path="/home" component={Home}></Route>
                <Route path="/test" component={Test}></Route>
                <Redirect from="/" to="/home" exact></Redirect>
              </Switch>
            </div>
          </div>
        </div>
      </div>
    </div>)
  }
}
